<template>
  <div class="phone">
    <div class="phoneTitle" v-if="showType=='wx'">预览</div>
    <div class="phoneTitle" v-if="showType=='wb'">微博预览</div>
    <div class="phoneContent" id="articlePrint">
      <!-- <img v-if="info.mbLogoUrl||info.imgUrl1" style="height: 140px;" :src="info.mbLogoUrl||info.imgUrl1"/> -->
      <div class="title">{{info.contentTitle||info.activityTitle}}</div>
      <div class="author">
        <!-- <img class="header" v-if="showType=='wx'" src="~@/assets/wecatDefault.jpg"/> -->
        <!-- <img class="header" v-if="showType=='wb'" src="~@/assets/wbdefault.png"/> -->
        <div class="name">{{publish.authorName}}</div>
        <!-- <div class="date">{{publish.releaseMode==2?publish.releaseSetTime:'今天'}}</div> -->
      </div>
      <div class="article-detail-tip1">{{info.contentIntroduce||info.activityIntroduction}}</div>
      <template v-if="info.contentType">
        <div class="article-content" v-if="info.contentType==1" v-html="info.content"></div>
        <div v-else-if="info.contentType==2" class="article-detail-video">
          <video controls style="width: 100%; height: 200px;">
            <source :src="info.videoUrl"/>
          </video>
        </div>
        <div v-else-if="info.contentType==3" class="article-detail-audio">
          <audio controls="controls" :src="info.voiceUrl"></audio>
        </div>
        <div v-else-if="info.contentType==4">
          <iframe class="article-detail-h5" :src="info.htmlUrl"></iframe>
        </div>
      </template>
      <template v-else>
        <div class="article-content" v-html="info.content"></div>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PreviewContent",
    props: ['info'],
    data() {
      return {
        publish: {},
        showType: 'wx'
      }
    },
    created() {
      if (this.info && this.info.publish) {
        this.publish = this.info.publish;
      }
    }
  }
</script>

<style scoped lang="less">

  .header {
    width: 34px;
    height: 34px;
    margin-right: 6px;
    border-radius: 50%;
  }

  .title {
    font-size: 20px;
    color: #333333;
  }

  .name {
    color: #76a8ff;
  }

  .date {
    color: #999999;
  }

  .article-content img {
    max-width: 100%;
  }

  /*.buttons {*/
  /*  width: 156px;*/
  /*  height: 70px;*/
  /*  position: absolute;*/
  /*  top: 0px;*/
  /*  right: -42%;*/
  /*  display: flex;*/
  /*  flex-direction: column;*/
  /*}*/

  .phone {
    // background-image: url('~@assets/frame.png') !important;
    background-size: 100% 100%;
    padding: 20px;
    box-shadow: none;
    margin: auto;
    height: 605px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;

    .phoneTitle {
      padding: 20px;
      color: #333;
      font-size: 22px;
    }

    .phoneContent {
      padding: 20px 20px 20px;
      border-radius: 0 0 32px 32px;
      background-color: white;
      height: 88%;
      overflow-y: auto;

      .content-title {
        color: #000000;
        font-size: 26px;
        line-height: 2;
      }
    }
  }

  .phoneContent > img {
    width: 100%;
  }

  .author {
    display: flex;
    align-items: center;

    .name {
      margin-right: 10px;
    }
  }

  .article-detail-h5{
    width: 100%;
    height: 420px;
  }
</style>